@charset "UTF-8";
// Copyright (C) 2019 Checkmk GmbH - License: GNU General Public License v2
// This file is part of Checkmk (https://checkmk.com). It is subject to the terms and
// conditions defined in the file COPYING, which is part of this source code package.

/* Styles used for marking up Monitoring data, such as host and
 * service states, Perf-O-Meters and the like.
 *
 * CSS classes for service states:
 * state0 - OK
 * state1 - WARN
 * state2 - CRIT
 * state3 - UNKN
 *
 * CSS classes for host states:
 * hstate0 - UP
 * hstate1 - DOWN
 * hstate2 - UNREACH
 *
 * TODO: Get rid of important styles throughout this style sheet
 */

.stale .state {
  text-shadow: none !important;
  background-image: none !important;
  filter: saturate(50%) brightness(105%);
}

td.state {
  width: 32px;
  font-weight: $font-weight-bold;
  text-align: center;
}

table.data tr.data td.stale,
table.data td.perfometer.stale div.title {
  color: $font-color-dimmed;
}

tr.groupheader .state span {
  padding: 2px 4px 0;
  border-radius: $theme-border-radius;
}

tr.data,
div.tile {
  td.state,
  td.hstate {
    height: 100%;
    padding: 0 1px;

    span.state_rounded_fill {
      display: flex;
      align-items: center;
      height: calc(100% - 3px);
      border-radius: 2px;
    }
  }
}

td.state span.state_rounded_fill {
  justify-content: center;
}

td.hstate span.state_rounded_fill {
  padding: 0 5px;

  &.host {
    /* align with host names without state background-color */
    padding: 0 8px;
  }
}

// TODO: Refactor the code so that every element with a class .stateX can apply style
// and no further class specifications like .bibox_box, .statemini etc. are necessary.
// This requires that the Python code sets the .stateX class on the correct elements.

/* OK/UP */
.bibox_box.state0,
span.content.state0,
b.state0,
td.count.state0,
td.number.state0,
td.fillbackground.state0,
.statemini.state0,
.statebullet.state0,
.infobox_entry.state0,
.state0 span,
.hstate0 span,
td.count.hstate0,
.timeline .state0,
.hostmatrix .state0,
div.statea,
div.stated,
table.job_details td.state.state0 {
  &,
  a {
    color: $font-color-black !important;
    background-color: $color-state-success-background !important;
  }
}

.hstate {
  white-space: nowrap;
}

/* WARN */
.bibox_box.state1,
span.content.state1,
label.state1,
b.state1,
td.count.state1,
td.number.state1,
td.fillbackground.state1,
.statemini.state1,
.statebullet.state1,
.infobox_entry.state1,
.state1 span,
.timeline .state1,
.hostmatrix .state1,
table.job_details td.state.state1 {
  &,
  a {
    color: $font-color-black !important;
    background-color: $color-state-1-background !important;
  }
}

/* CRIT/DOWN */
.bibox_box.state2,
span.content.state2,
label.state2,
b.state2,
td.count.state2,
td.number.state2,
td.fillbackground.state2,
.statemini.state2,
.statebullet.state2,
.infobox_entry.state2,
.state2 span,
.timeline .state2,
.hostmatrix .state2,
.hstate1 span,
td.count.hstate1,
table.job_details td.state.state2 {
  &,
  a {
    color: $font-color-white !important;
    background-color: $color-state-2-background !important;
  }
}

/* UNKNOWN / UNREACH */
.bibox_box.state3,
span.content.state3,
label.state3,
b.state3,
td.count.state3,
td.number.state3,
td.fillbackground.state3,
.statebullet.state3,
.infobox_entry.state3,
.state3 span,
.timeline .state3,
.hostmatrix .state3,
.hstate2 span,
td.count.hstate2 {
  &,
  a {
    color: $font-color-white !important;
    background-color: $color-state-3-background !important;
  }
}

/* PENDING / in DOWNTIME */
span.content.state-1,
.statebullet.statep,
table.job_details td.state.statep {
  &,
  a {
    color: $font-color-white !important;
    background-color: $color-state-4-background !important;
  }
}

/* RUNNING */
table.job_details td.state.job_running {
  color: $font-color-white !important;
  background-color: $color-state-running-background !important;
}

.state-1,
.statep,
.hstatep,
.stated,
.hstated {
  &.count,
  span {
    &,
    a {
      background-color: $color-state-4-background !important;
    }
  }
}

svg {
  .svcstate,
  .hoststate {
    // Undefined state (e.g. if no metric is available in the gauge dashlet)
    fill: $downtime !important;
    stroke: $downtime !important;
  }

  .state0,
  .hstate0 {
    /* OK/UP */
    fill: $color-state-success-background !important;
    stroke: $color-state-success-background !important;
  }

  .state1 {
    /* WARN */
    fill: $color-state-1-background !important;
    stroke: $color-state-1-background !important;
  }

  .state2,
  .hstate1 {
    /* CRIT/DOWN */
    fill: $color-state-2-background !important;
    stroke: $color-state-2-background !important;
  }

  .state3,
  .hstate2 {
    /* UNKNOWN/UNREACH */
    fill: $color-state-3-background !important;
    stroke: $color-state-3-background !important;
  }

  .state-1 {
    // PENDING
    fill: $color-state-4-background !important;
    stroke: $color-state-4-background !important;
  }
}

/* inline state markers in check output */
b.stmark {
  position: relative;
  top: -1px;
  padding: 1.5px 3px;
  margin-left: 2px;
  font-size: $font-size-small;
  border-radius: 4px;
}

.statemini {
  float: left;
  width: 12px;
  height: 12px;
  margin: 1px;
  font-size: $font-size-small;
  text-align: center;
  cursor: pointer;
  border-radius: 2px;
}

.statebullet {
  position: relative;
  top: 3px;
  left: 1px;
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

/* Status of sites in sidebar and in WATO */
.status_label {
  width: 56px;
  height: 16px;
  padding: 2px;
  font-size: $font-size-small;
  line-height: 12px;
  color: $font-color-white;
  text-align: center;
  cursor: default;
  border-radius: 8px;
  box-shadow: none;
  box-sizing: border-box;

  &.button {
    cursor: pointer;

    &:hover {
      /* TODO: create a better hover effect */
      opacity: 0.5;
      filter: alpha(opacity=50);
      /* For IE8 and earlier */
    }
  }

  &.disabled {
    color: $font-color-dimmed;
    background-color: $input-background-color;
  }

  &.dead {
    background-color: $danger-dimmed;
  }

  &.down {
    background-color: $danger;
  }

  &.online {
    color: $font-color-light-bg;
    background-color: $color-state-success-background;
  }

  &.partial {
    background-color: $site-state-partial;
  }

  &.unknown {
    background-color: $site-state-unknown;
  }

  &.unreach {
    background-color: $orange-2;
  }

  &.waiting {
    background-color: $hostdown;
  }
}

/* Performeter styling */

table.data tr.data td.perfometer {
  width: 120px;
  height: 22px;
  padding: 1px 2px 2px 1px;
  vertical-align: middle;
}

table.data tr.data > td.perfometer {
  width: 150px;
  padding: 4px;

  .content {
    width: 100%;
    padding: 0;
    overflow: hidden;
    border: 1px solid $color-table-border;
    filter: saturate(50%);
  }

  .title {
    top: 2px;
    width: 100%;
    padding: 0;
    margin: 0;
    letter-spacing: 0;
  }

  .glass {
    display: none;
  }

  table {
    border: none;
  }
}

td.perfometer {
  a {
    color: $font-color-black;
    text-decoration: none;
  }

  > a {
    position: relative;
    display: block;

    &.disabled {
      cursor: auto;
    }
  }

  div.content {
    z-index: 20;
    width: 120px;
  }

  div.title {
    position: absolute;
    top: 1px;
    z-index: 40;
    width: 114px;
    margin: 0 3px;
    overflow: hidden;
    font-weight: $font-weight-bold;
    line-height: 22px;
    color: $font-color-light-bg;
    text-align: center;
    white-space: nowrap;
  }

  div.glass {
    position: absolute;
    top: 1px;
    left: 2px;
    z-index: 30;
    display: block;
    width: 120px;
    height: 22px;
    margin-bottom: 1px;
  }

  table {
    width: 100%;
    height: 24px;
    padding: 0;
    margin: 0;
    border-spacing: 0;
  }
}

table.data td.perfometer {
  td.inner {
    height: 22px;
    padding: 0 0 0 1px;
    margin: 0;
    border: none;
  }

  div.stacked {
    table {
      height: 12px;

      &:first-child {
        border-bottom-style: none;
      }
    }

    td.inner {
      height: 10px;
    }
  }
}

/* Row coloring in case of the different states */
tr[class*="odd"] {
  background-color: $odd-tr-bg-color;
}

tr[class*="even"] {
  background-color: $even-tr-bg-color;
}

.data div.hostdown {
  padding-right: 3px;
  padding-left: 3px;
  background-color: $color-state-2-background;
  border: 2px solid $black;
  border-radius: 4px;
}

table.data {
  td.age {
    color: $font-color-dimmed;
    white-space: nowrap;

    &.staletime {
      font-weight: $font-weight-bold;
      color: $font-color-red;
    }

    &.recent {
      font-weight: $font-weight-bold;
      color: $font-color;
    }
  }

  .state2 *,
  .state3 * {
    color: $font-color-white;
  }
}

td.badflag span {
  font-weight: $font-weight-bold;
  background-color: $orange-2;
}

td.goodflag {
  color: $font-color-green !important;
}

td.icons {
  width: 1px;
  white-space: nowrap;

  img {
    margin-right: 0;
  }
}

td.icon {
  width: 20px;
}

img.tabicon {
  position: relative;
  top: -1px;
  left: 0;
  width: 16px;
  height: 16px;
  vertical-align: middle;
}

/* Styles used by specific painters. These should be modularized later ... */
table.data div.objectlist div {
  float: left;
  margin: 2px $spacing-half 3px 0;

  span {
    display: inline-block;
    padding: 2px $spacing-half;
    border-radius: $theme-border-radius;
  }
}

/*
 Sites can be represented by small icons with a size of 24x24 px.
 This is the styling for these icons.
 */
img.siteicon {
  width: 24px;
  height: 24px;
  border: 1px solid $bi-box-border-color;
}

table.data tr.data td table.customvars td {
  padding: 0 5px 0 0;

  &:last-child {
    padding-left: 5px;
    border-left: 1px solid $grey-2;
  }
}

td.matchgroups span {
  padding: 2px;
  margin-right: 3px;
  border: 1px solid $font-color-dimmed;
  border-radius: $theme-border-radius;
}
